<template>
  <el-card>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <div class="before">
          <el-row type="flex" justify="start">
            <div v-if="showBefore" class="content">
              <i v-if="showBefore" :class="icon" />
              <slot v-if="showBefore" name="before" />
            </div>
          </el-row>
        </div>
      </el-col>
      <el-col>
        <div class="after">
          <el-row type="flex" justify="end">
            <slot name="after" />
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
    props: {
        showBefore: {
            type: Boolean,
            default: true
        },
        icon: {
            type: String,
            default: 'el-icon-info'
        }
    }
}
</script>
<style scope>
.el-card__body {
    padding: 5px;
}
.pageTools {
    margin:5px 0;
    width: 100%
}
i {
    margin-right:10px;
    color:#369aff
}
.after {
    margin-right: 10px;
}
.content {
    background-color: #b8e4ff;
    border: 1px solid #369aff;
    /* padding:3px; */
    border-radius:5px;
    font-size: 12px;
}
</style>
